<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            overflow: hidden;
            background-color: skyblue;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son</div>
    </div>
    <img src="DOM事件流.png" alt="">
    <br>
    <img src="DOM事件流2.png" alt="">
    <br>
    <img src="DOM事件流3.png" alt="">
    <script>
        // 1. 事件捕获的流程
        // 如果 addEventListener 第三个参数是 true 那么处于事件捕获阶段 事件捕获流程 document -> html -> body -> father -> son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father');
        // }, true);

        // 2. 事件冒泡的流程
        // 如果 addEventListener 第三个参数是 false 或者 为空 那么处于事件冒泡阶段 事件捕获流程 son -> father -> body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            // // 阻止事件冒泡(存在兼容性问题) e.stopPropagation() 
            // e.stopPropagation();
            // // e.cancelBubble = true;   // 非标准
            // e.cancelBubble = true;
            //  兼容性写法 (阻止事件冒泡)
            if (e && e.stopPropagation) {
                e.stopPropagation();
            } else {
                window.event.cancelBubble = true;
            }
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        });
    </script>
</body>

</html>